<template>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="姓名">
            <el-input v-model="formInline.name" placeholder="请输入姓名" clearable />
        </el-form-item>
        <el-form-item label="证书编号">
            <el-input v-model="formInline.certificateno" placeholder="请输入证书编号" clearable />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>

    <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="id" label="编号" width="70" />
        <el-table-column prop="name" label="姓名" width="80" />
        <el-table-column prop="sex" label="性别" width="70" />
        <el-table-column prop="birthday" label="出生日期" width="150" :formatter="formatter" />
        <el-table-column prop="typein" label="院校类型" width="200" />
        <el-table-column prop="graschool" label="毕业学校" width="120" />
        <el-table-column prop="gratime" label="毕业时间" width="120" :formatter="formatter" />
        <el-table-column prop="certificateno" label="证书编号" width="120" />
        <el-table-column fixed="right" label="操作" width="120">
            <template #default="scope">
                <el-button link type="warning" size="small" @click="handleClick(scope.row)">修改</el-button>
                <el-button link type="danger" size="small" @click="offlineClick(scope.row)">休学</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination background layout="prev, pager, next" 
    :total="pageData.total" 
    :page-size="pageData.pageSize" 
    @current-change="currentChange"/> 
<!-- current-change 事件 current-page 改变时触发 -->
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
// ref 赋值时需要加上.value
 
import { eduInfoApi } from '@/api'
import { dayjs } from 'element-plus';

import {useRouter} from 'vue-router'

// 消息弹框
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter()

//数据传递
const formInline = reactive({
    name: '',
    certificateno:''
})

//分页
const pageData = reactive({
    total: 0,  //总条数
    pageSize: 3, // 每页显示的数据
    pageNum: 1  // 第几页
})
const currentChange = (num:number) => { 
    console.log(num);
    pageData.pageNum = num
    callEduInfoApi()    //回调一下api接口
}

// 从后台获取数据
const tableData = ref([])


//定义格式化日期操作
const formatter = (row: any, column, cellValue: any, index) => {
    //    console.log(cellValue);
    // console.log(column.property=="birthday");
    if (column.property == "birthday") {
        return dayjs(cellValue).format('YYYY-MM-DD')
    }
    if (column.property == "gratime") {
        return dayjs(cellValue).format('YYYY年MM月DD')
    }

}

const handleClick = (row:any) => {
    // console.log('click')
    router.push({name: 'educations-edit', query: {id : row.id}})

}

//休学状态
const offlineClick = (row : any) => { 
    // console.log('click')

     ElMessageBox.confirm(
        '学生姓名是：'+row.name+' 确定休学吗？',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
             eduInfoApi.delete.call({id:row.id}).then((res: any) => { 
                 
                 ElMessage({
                    type: 'success',
                    message: '休学成功',
                })
                callEduInfoApi()
             })
           
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消休学',
            })
        })
}

//绑定查询方法
const onSubmit = () => {
    callEduInfoApi()
}
//进行渲染
//挂载
onMounted(() => {
    callEduInfoApi()
})

const callEduInfoApi = () => {
    
    let name = formInline.name === "" ? undefined : formInline.name
    let certificateno = formInline.certificateno === "" ? undefined : formInline.certificateno

    eduInfoApi.select.call({name: name,certificateno:certificateno,pageNum:pageData.pageNum,pageSize:pageData.pageSize}).then((res: any) => {
        // console.log(res);
        tableData.value = res.items
        pageData.total = res.total
    })


}

</script>

<style scoped>
.demo-form-inline{
    margin-top: 10px;
    margin-left: 15px;
}
.el-pagination{
    margin-top: 16px;
}

</style>